
(function () {
    //显示隐藏
    $("#span-box").find(".hhh").mouseenter(function () {
        $(this).children(".none2").stop().animate({ opacity: 1 }, 1000)
    }).mouseleave(function () {
        $(this).children(".none2").stop().animate({ opacity: 0 }, 1000)
    })
    $("#span-box").find(".hhh").mouseenter(function () {
        $(this).children(".none3").stop().animate({ opacity: 1 }, 1000)
    }).mouseleave(function () {
        $(this).children(".none3").stop().animate({ opacity: 0 }, 1000)
    })
    //回到顶部
    $("#span-box").find("#backTop").on("click", function () {
        $("html,body").animate({
            scrollTop: 0
        })
    })
    $("#top").on("click", function () {
        $("html,body").animate({
            scrollTop: 0
        })
    })


    //1.因为小区域和大区域是隐藏的,不能通过 offsetLeft 获取值
    // 使用自己封装 getStyle方法
    //2. 遵循 小区域/小图=大区域/大图,发现比例不合适,就只能修改
    // 小区域的大小
    //3.计算出比例  bili= 大区域/小区域
    //DOM2事件
    $("#smallArea").css({
        height: $("#bigArea").height() * ($("#smallImg").height() / $("#bigImg").height()),
        width: $("#bigArea").width() * ($("#smallImg").width() / $("#bigImg").width()),
    })
    //比例只需要计算一次,就在小区域调整好了之后在计算
    let oScore = $("#bigArea").width() / $("#smallArea").width();
    //进入小图,小区域和大区域显示
    $("#smallImg").on("mouseenter", function () {
        $("#bigArea").stop().show();
        $("#bigArea").stop().animate({ opacity: 1 }, 500);
        $("#smallImg").stop().animate({ opacity: 0 }, 500)
    }).on("mouseleave", function () {
        $("#bigArea").stop().hide();
        $("#bigArea").stop().animate({ opacity: 0 }, 500);
        $("#smallImg").stop().animate({ opacity: 1 }, 500)
    })
    //在小图里移动
    $("#smallImg").on("mousemove", function (e) {
        let mX = e.pageX - $(this).offset().left - $("#smallArea").width() / 2
        let mY = e.pageY - $(this).offset().top - $("#smallArea").height() / 2
        if (mX <= 0) {
            mX = 0
        }
        if (mY <= 0) {
            mY = 0
        }
        if (mX >= $("#smallImg").width() - $("#smallArea").width()) {
            mX = $("#smallImg").width() - $("#smallArea").width()
        }
        if (mY >= $("#smallImg").height() - $("#smallArea").height()) {
            mY = $("#smallImg").height() - $("#smallArea").height()
        }
        $("#smallArea").css({
            left: mX,
            top: mY,
        })
        //大图反向走
        $('#bigImg').css({
            left: mX * -oScore,
            top: mY * -oScore
        })
    })

    //给每个li绑定点击事件
    Array.from($("#small").find("li")).forEach((el, index) => {
        $(el).click(function () {
            console.log(index);
            $("#smallImg").children("img").attr({ src: `./images/XQY/small${index + 1}.jpg` })
            $("#bigImg").attr({ src: `./images/XQY/big${index + 1}.jpg` })
        })
    });



    //飞入购物车
    $(".shoppingxianqin-right-xz-jiaru").click(function () {
        var $cloneImg = $(".flyimg").children("img").clone(true)
        $cloneImg.css({position:"absolute"})
        $cloneImg.css({top:"0px"})
        $cloneImg.css({left:"0px"})
        $(".flyimg").append($cloneImg)
        var position={
            left:$("#span-box").children(".hhh").eq(0).find("img").offset().left,
            top:$("#span-box").children(".hhh").eq(0).find("img").offset().top
        }
        // $cloneImg.animate(position)
         $cloneImg.animate(position)
         
         $cloneImg.remove()
    })
})()